﻿@{
    Layout = null;
    ViewData["Title"] = "Index";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>UserIndex用户管理</h1>
<div id="app">
    <div v-if="flagHid==1">
        <el-row :gutter="20">
            <el-col :span="6">
                当前角色总数：{{rows}}例
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="3" :offset="21"><el-button type="success" round v-on:click="handleAddPage">添加用户</el-button></el-col>
        </el-row>
        <div style="margin:15px 0;"></div>
        @*用户查询的表单*@
        <el-table :data="users"
                  border
                  style="width: 100%">
            <el-table-column fixed
                             type="index"
                             width="50">
            </el-table-column>
            <el-table-column fixed
                             prop="u_id"
                             label="用户编号"
                             width="150">
            </el-table-column>
            <el-table-column fixed
                             prop="u_name"
                             label="用户名称"
                             width="150">
            </el-table-column>
            <el-table-column fixed
                             prop="u_true_name"
                             label="真实姓名"
                             width="150">
            </el-table-column>
            <el-table-column fixed
                             prop="u_password"
                             label="用户密码"
                             width="150">
            </el-table-column>
            <el-table-column fixed
                             prop="rname"
                             label="用户身份"
                             width="150">
            </el-table-column>
            <el-table-column fixed="right"
                             label="操作"
                             width="100">
                <template slot-scope="scope">
                    <el-button v-on:click="handleEdit(scope.row)" type="text">编辑</el-button>
                    <el-button type="text" v-on:click="handleDelete(scope.row.u_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="pgcurrent"
                       :page-sizes="[3, 6, 9, 11]"
                       :page-size="pgsize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="rows">
        </el-pagination>
    </div>
    @*新增用户*@
    <div v-if="flagHid==2">
        <el-row :gutter="20">
            <el-col :span="5" :offset="19">
                <el-button type="success" round v-on:click="handleInsert('user')">提交</el-button>
                <el-button round style="margin-left:10px" v-on:click="flagHid=1">返回</el-button>
            </el-col>
        </el-row>
        <div style="margin:25px 0;"></div>
        <el-form ref="user" :model="user" :rules="rules" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="用户名称" prop="u_name">
                        <el-input v-model="user.u_name" placeholder="请输入用户名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="8">
                    <el-form-item label="用户密码" prop="u_password">
                        <el-input v-model="user.u_password" placeholder="请输入用户密码" type="password"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="真实姓名" prop="u_true_name">
                        <el-input v-model="user.u_true_name" placeholder="请输入真实姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="8">
                    <el-form-item label="用户身份" prop="rid">
                        <el-select v-model="user.rid" placeholder="请选择用户身份">
                            <el-option v-for="item in roles" :key="item.rid" :label="item.rname" :value="item.rid"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    @*修改用户*@
    <div v-if="flagHid==3">
        <el-row :gutter="20">
            <el-col :span="5" :offset="19">
                <el-button type="success" round v-on:click="handleUpdate('user')">提交</el-button>
                <el-button round style="margin-left:10px" v-on:click="flagHid=1">返回</el-button>
            </el-col>
        </el-row>
        <div style="margin:25px 0;"></div>
        <el-form ref="user" :model="user" :rules="rules" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="用户名称" prop="u_name">
                        <el-input v-model="user.u_name" placeholder="请输入用户名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="8">
                    <el-form-item label="用户密码" prop="u_password">
                        <el-input v-model="user.u_password" placeholder="请输入用户密码"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="真实姓名" prop="u_true_name">
                        <el-input v-model="user.u_true_name" placeholder="请输入真实姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="8">
                    <el-form-item label="用户身份">
                        <el-select v-model="role" placeholder="请选择用户身份" value-key="rid" v-on:change="rolesele">
                            <el-option v-for="item in roles" :key="item.rid" :label="item.rname" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</div>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            pgsize: 3,
            pgcurrent: 1,
            rows: 0,
            //用户类
            user: {
                u_id: 0,
                u_name: '',
                u_true_name: '',
                u_password: '',
                rid: '',
                rname: '',
            },
            //用户数据集，刷新
            users: [],
            //标记部分 1：表单界面，2：新增界面，3：修改界面
            flagHid: 1,
            //角色数据集，下拉列表框
            roles: [],
            //角色类
            role: {},
            //验证规则
            rules: {
                u_name: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                ],
                u_password: [
                    { required: true, message: '请输入用户密码', trigger: 'blur' },
                ],
                u_true_name: [
                    { required: true, message: '请输入用户真实姓名', trigger: 'blur' },
                ],
                rid: [
                    { required: true, message: '请选择角色名称', trigger: 'blur' },
                    //{type: 'integer', message: `请选择角色名称`, trigger: 'blur'}
                ],
            },
        },
        methods: {
            //查询所有用户的刷新方法
            fillUsers() {
                //回到首页的刷新
                this.flagHid = 1;
                axios.get("/Role/RoleFillUsers?pgsize=" + this.pgsize + "&pgcurrent=" + this.pgcurrent).then(res => {
                    this.users = res.data.tabs;
                    this.rows = res.data.rows;
                })
            },
            //查询角色表所有角色，给下拉列表框赋值
            fillRoles() {
                axios.post("/Role/RoleFillRoles").then((res) => {
                    this.roles = res.data;
                })
            },
            //新增按钮的点击事件
            handleAddPage() {
                this.user = {};
                this.flagHid = 2;
                this.fillRoles();
            },
            //角色下拉列表框变更事件
            rolesele(val) {
                console.info("下拉框的值改变事件：", val);
                //这里要将角色ID进行修改
                this.user.rid = val.rid;
            },
            //确认新增用户的的点击事件
            handleInsert(formRoles) {
                this.$refs[formRoles].validate(vali => {
                    if (vali) {
                        axios.post("/Role/RoleInsertUsers", {
                            u_name: this.user.u_name,
                            u_password: this.user.u_password,
                            u_true_name: this.user.u_true_name,
                            rid: this.user.rid,
                        }).then((res) => {
                            if (res.data > 0) {
                                this.openSuccess("成功添加用户！");
                                //清空表单
                                this.$refs[formRoles].resetFields();
                                this.fillUsers();
                            }
                        })
                    } else {
                        this.openError("请完成验证后再进行用户提交！");
                    }
                })
            },
            //编辑按钮点击事件
            handleEdit(row) {
                this.fillRoles();
                this.user = row;
                this.role.rid = row.rid;
                this.role.rname = row.rname;
                console.info(this.role, "userUdp,", this.user);
                this.flagHid = 3;
            },
            //确认修改按钮的点击事件
            handleUpdate(formRoles) {
                this.$refs[formRoles].validate(vali => {
                    if (vali) {
                        axios.post("/Role/RoleUpdateUsers", {
                            u_id: this.user.u_id,
                            u_name: this.user.u_name,
                            u_password: this.user.u_password,
                            u_true_name: this.user.u_true_name,
                            rid: this.user.rid,
                        }).then((res) => {
                            if (res.data > 0) {
                                this.openSuccess("成功修改用户！");
                                this.fillUsers();
                                //清空表单
                                //this.$refs[formRoles].resetFields();
                            }
                        })
                    } else {
                        this.openError("请完成验证后再进行用户修改！");
                    }
                })
            },
            //删除按钮点击事件
            handleDelete(uid) {
                this.$confirm("确定要删除该用户吗？", "温馨提示").then(res => {
                    console.info(uid);
                    axios.delete("/Role/RoleDeleteUsers?u_id=" + uid).then(res => {
                        this.openSuccess("成功删除用户！");
                        this.fillUsers();
                    })
                }).catch(err => {
                    this.openError("已取消删除操作");
                })
            },
            openSuccess(msg) {
                this.$notify({
                    title: '成功',
                    message: msg,
                    type: 'success'
                });
            },
            openError(msg) {
                this.$notify.error({
                    title: '错误',
                    message: msg
                });
            },
            handleSizeChange(val) {
                this.pgsize = val;
                this.fillUsers();
            },
            handleCurrentChange(val) {
                this.pgcurrent = val;
                this.fillUsers();
            }
        },
        mounted: function() {
            this.fillUsers();
        }
    })
</script>
